import { actionsMap } from '@/constants/actions'
import { computed, ref, ComputedRef } from 'vue'
import { Btn } from '@/types'
import { defaultBtns } from '@/constants/btns'
import { eventBus, logger, timeline } from '@/instance'
export type ToolbarComposition = {
  btns: ComputedRef<Array<Btn>>
  handleClick: (btn: Btn) => void
}

export function useToolbar(): ToolbarComposition {
  logger.log('composables/toolbar', 'useToolbar')

  const paused = ref(timeline.paused)
  timeline.on('play', () => (paused.value = false))
  timeline.on('pause', () => (paused.value = true))
  const btns = computed(() => {
    logger.log('composables/toolbar', 'btnsComputed')
    return (defaultBtns as Array<Btn>).filter((i) => {
      if (i.id === actionsMap.PLAY && !paused.value) {
        return false
      } else if (i.id === actionsMap.PAUSE && paused.value) {
        return false
      }
      return true
    })
  })
  const handleClick = (btn: Btn) => {
    const action = btn.id
    eventBus.emit(action)
    logger.log('composables/toolbar', 'handleClick', action, btn)
  }
  return {
    handleClick,
    btns,
  }
}
